$(function(){

  // 定义状态
  let state=null
  // 给发布按钮注册点击事件
  $('.btn_commit').click(function(){
    state='已发布'
   
  })
  // 给存为草稿按钮注册点击事件
  $('.btn_cg').click(function(){
    state='草稿'
    
    
  })
 
    // 定义工具栏的配置
    const toolbarOptions = [
        ['bold', 'italic', 'underline', 'strike','image'],        // toggled buttons
        ['blockquote', 'code-block'],
      
        [{ 'header': 1 }, { 'header': 2 }],               // custom button values
        [{ 'list': 'ordered'}, { 'list': 'bullet' }],
        [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
        [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
        [{ 'direction': 'rtl' }],                         // text direction
      
        [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
      
        [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
        [{ 'font': [] }],
        [{ 'align': [] }],
      
        ['clean']                                         // remove formatting button
      ];
      

    // 初始化富文本编辑器
    var quill = new Quill('#editor', {
        modules: {
            toolbar: toolbarOptions
          },
        theme: 'snow'
      });
// 获取文章分类数据（用于动态显示下来列表的文章类别）
function initCateList(){
    $.get('/my/article/cates',function(res){
        if(res.status===0){
        //   根据模板引擎动态渲染下拉列表
      const htmlStr=  template('temp-sel',res)
      $('[name="cate_id"]').html(htmlStr)
    //   用layui的忽略美化功能，阻止对文章内容中的下拉列表的美化（用自己的系统风格）
      $('.ql-toolbar select').attr('lay-ignore','')
    //   更新渲染表单的下来菜单
    layui.form.render('select')
    // 更新渲染表单结构后，发现，丑丑的下拉列表显示出来了，要给他(富文本编辑器的下拉列表)隐藏起来
    $('.ql-toolbar select').css('display','none')
    
        }
    })
}
initCateList()



// 实现预览结果
// 获取指定的DOM对象（获取要裁剪的图片）
$image=$('#image')
// 设置配置选项
const options={
  // 设置纵横比
  aspectRatio:400/280,
  // 设置预览区域
  preview: '.img-preview'

}
// 调用cropper方法，初始化配置选项
$image.cropper(options)


// 为上传封面按钮注册点击事件
$('.layui-btn-danger').click(function(){
// 模拟文件选择框的点击行为
$('#file').click()
})
// 为文件选择框注册change事件
$('#file').change(function(e){
 
  const files=e.target.files
 if(files.length==0)return 
  
  const file=files[0]
  // 根据选择的文件，创建一个对应的 URL 地址：
 const imgUrl= URL.createObjectURL(file)
//  因为是图片裁剪区，而不是简单地图片区域，所以需要三步走
 $image
.cropper('destroy')      // 销毁旧的裁剪区域
   .attr('src', imgUrl)  // 重新设置图片路径
   .cropper(options)        // 重新初始化裁剪区域
})

// 为表单注册submit事件
$('.com_form').submit(function(e){
  e.preventDefault()
 console.log(state);
  const fd=new FormData()
  // 1、获取数据(把提交给服务器的数据先准备好)
  // 1.1 把文章标题存入到fd中
  fd.append('title',$('[name="title"]').val().trim())
  // 1.2、 把文章类别存入到fd中
  fd.append('cate_id',$('[name="cate_id"]').val().trim())
  // 1.3、把文章内容存入到fd中
  fd.append('content',$(quill.root.innerHTML))
  // 1.5把状态存入到fd中
fd.append('state',state)
// console.log(state);
  // 1.4、把文章封面存入到fd中
  $image.cropper('getCroppedCanvas',{
    width: 400,
    height: 280
  }).toBlob(function(blob){
    // blob就是裁剪的文件
    fd.append('cover_img',blob)
    // 2 把准备好的数据，发送给服务器
$.ajax({
  type:'POST',
  url:'/my/article/add',
  data:fd,
  contentType:false,
  processData:false,
  success:function(res){
    layer.msg(res.message)
    if(res.status==0){
      location.href='/article/art_list.html'
    }
  }


})

  })

})
})
